<template>
	<view class="my-page">
		<u-navbar leftIconColor="#000" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				商品币转增
			</view>
		</u-navbar>
		<view class="content">
			<view class="item">
				<u--input placeholder="请输入对方账号" border="none" v-model="account"></u--input>
			</view>
			<view class="item">
				<u--input type="number" placeholder="请输入转出商品币数量" border="none" v-model="num"></u--input>
			</view>
			<view class="tips">
				可转出的商品币数量：{{balance}}
			</view>
			<view class="item">
				<u--input type="number" placeholder="请输入交易密码" border="none" v-model="password"></u--input>
			</view>
			<view class="btn">
				<u-button color="#090B08" size="large" shape="circle" type="primary"
					text="确认转出" @click="transfer"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				balance: '',
				account: '',
				num: '',
				password: ''
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			md5Encrypt(text) {
				return CryptoJS.MD5(text).toString();
			},
			getInfo() {
				this.$Request({
					method: 'POST',
					url: '/api/mutualaidorder/accountIndexgive_balance',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.balance = res.data.balance
					}
				})
			},
			transfer() {
				if (this.account == '') {
					uni.showToast({
						title: '对方账号不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.num < 1) {
					uni.showToast({
						title: '转增金额不可小于1！',
						icon: 'none'
					})
					return
				}
				if (this.paypass == '') {
					uni.showToast({
						title: '请输入交易密码！',
						icon: 'none'
					})
					return
				}
				let params = {
					mobile: this.account,
					num: this.num,
					paypass: this.md5Encrypt(this.password)
				}
				this.$Request({
					method: 'POST',
					url: '/api/mutualaidorder/energyTransfergive',
					data: params,
					ismsg: true,
				}).then(res => {
					if (res.code == 1) {
						this.account = ''
						this.num = ''
						this.password = ''
						this.getInfo()
					}
				})
			},
			inputValue() {
				if (this.num > this.balance) {
					this.num = this.balance;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		background-image: url('../../../static/home/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 500rpx;
		min-height: 80vh;
		padding: 30rpx;

		.nav-title {
			color: #000;
		}

		.content {
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);

			.item {
				background-color: #F7F5F6;
				border-radius: 30rpx;
				padding: 20rpx 30rpx;
				margin-bottom: 30rpx;
			}

			.tips {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				text-align: right;
			}
		}
	}
</style>